<template>
  <div class="wrap">
    <el-dialog :title="'选择' + title" :visible.sync="codeDialog" :close-on-click-modal="false"
      :close-on-press-escape="false" @close="codeClose">
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="440">
          <el-table-column type="index" width="55" align="center" label=" ">
            <template slot-scope="{ row }">
              <el-radio-group v-model="form.businessId" @input="selectName(row)">
                <el-radio :label="row.qrId" v-show="title === '渠道活码'">{{
                  undefined
                }}</el-radio>
                <el-radio :label="row.id" v-show="title === '群活码'">{{
                  undefined
                }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="二维码" align="center" prop="activityName" show-overflow-tooltip></el-table-column>
          <el-table-column label="使用员工" align="center" prop="userNames" show-overflow-tooltip
            v-if="title === '渠道活码'"></el-table-column>
          <el-table-column label="使用员工" align="center" prop="userName" show-overflow-tooltip
            v-if="title === '群活码'"></el-table-column>
          <el-table-column label="兜底员工" align="center" prop="guaranteeUserNames" show-overflow-tooltip
            v-if="title === '渠道活码'"></el-table-column>
          <el-table-column label="拉群方式" align="center" prop="groupWays" show-overflow-tooltip v-if="title === '群活码'">
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.groupWays == '0'">群二维码拉群</span>
                <span v-if="row.groupWays == '1'">企微活码拉群</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="page.total" layout="total,sizes,prev,pager,next" :pagerCount="5" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      <el-button type="primary" class="dialog-btn" @click="confirm">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { verbalList, groupCode } from "@/api/operate/verbalTrick";

export default {
  name: "TableCode",
  props: {
    title: String,
    codeDialog: Boolean,
    form: Object,
  },
  data() {
    return {
      groupId: "",
      qrId: "",
      selectIndex: null, // 为了控制单选
      loading: false,
      tableList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      closeFlag: false,
    };
  },
  watch: {
    codeDialog: {
      handler() {
        if (this.$props.codeDialog) {
          this.qrId = this.$props.form.businessId;
          this.getList()
        }
      },
    },
  },

  methods: {
    handleSizeChange(value) {
      this.pageNum = 1
      this.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.pageNum = value
      this.getList()
    },
    getList() {
      if (this.title === "渠道活码") {
        this.verbalList();
      } else {
        this.groupCode();
      }
    },
    // 渠道活码
    verbalList() {
      let obj = {
        mediaType: 1,
        levelType: 3,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.tableList = [];
      this.loading = true;
      verbalList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || [];
          this.total = res.total || 0;
        }
        this.loading = false;
      });
    },
    // 群活码
    groupCode() {
      let obj = {
        mediaType: 2,
        levelType: 3,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.tableList = [];
      this.loading = true;
      groupCode(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || [];
          this.total = res.total || 0;
        }
        this.loading = false;
      });
    },
    // 弹窗关闭--清空数组
    codeClose() {
      this.$emit("codeClose");
    },
    selectName(e) {
      this.form.codeName = e.activityName;
    },
    // 确认
    confirm() {
      this.pageNum = 1;
      this.$emit("codeClose");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .el-dialog {
  width: 80%;
}
</style>
